<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Foo</title>
  <link href="http://example.com/foo" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1>Foo</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Testing &lt;pre class=elementdef> elements.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <table class="def elementdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn data-dfn-type="element" data-export id="elementdef-testelement"><code>testelement</code><a class="self-link" href="#elementdef-testelement"></a></dfn>
     <tr>
      <th>Categories:
      <td><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#flow-content-2" id="ref-for-flow-content-2">flow content</a>, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element">graphics element</a>
     <tr>
      <th>Contexts:
      <td>whatever, this is free text
     <tr>
      <th>Content model:
      <td>this is free text too
     <tr>
      <th>Attributes:
      <td>
       <ul>
        <li>
         <details>
          <summary><a data-link-type="dfn" href="#baz-attributes" id="ref-for-baz-attributes">baz attributes</a></summary>
          <ul>
           <li><dfn data-dfn-type="element-attr" for="testelement" id="element-attrdef-testelement-baz1"><a data-link-type="element-attr" for="baz attributes" href="#element-attrdef-baz-attributes-baz1" id="ref-for-element-attrdef-baz-attributes-baz1">baz1</a><a class="self-link" href="#element-attrdef-testelement-baz1"></a></dfn>
           <li><dfn data-dfn-type="element-attr" for="testelement" id="element-attrdef-testelement-baz2"><a data-link-type="element-attr" for="baz attributes" href="#element-attrdef-baz-attributes-baz2" id="ref-for-element-attrdef-baz-attributes-baz2">baz2</a><a class="self-link" href="#element-attrdef-testelement-baz2"></a></dfn>
          </ul>
         </details>
        <li>
         <details>
          <summary><a data-link-type="dfn" href="#quux-attributes" id="ref-for-quux-attributes">quux attributes</a></summary>
          <ul>
           <li><dfn data-dfn-type="element-attr" for="testelement" id="element-attrdef-testelement-quux1"><a data-link-type="element-attr" for="quux attributes" href="#element-attrdef-quux-attributes-quux1" id="ref-for-element-attrdef-quux-attributes-quux1">quux1</a><a class="self-link" href="#element-attrdef-testelement-quux1"></a></dfn>
           <li><dfn data-dfn-type="element-attr" for="testelement" id="element-attrdef-testelement-quux2"><a data-link-type="element-attr" for="quux attributes" href="#element-attrdef-quux-attributes-quux2" id="ref-for-element-attrdef-quux-attributes-quux2">quux2</a><a class="self-link" href="#element-attrdef-testelement-quux2"></a></dfn>
          </ul>
         </details>
        <li><a data-link-type="element-attr" href="#element-attrdef-testelement-foo" id="ref-for-element-attrdef-testelement-foo">foo</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-testelement-bar" id="ref-for-element-attrdef-testelement-bar">bar</a>
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td><a class="idl-code" data-link-type="interface" href="#svgtestelement" id="ref-for-svgtestelement">SVGTestElement</a>
   </table>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="testelement" data-dfn-type="element-attr" data-export id="element-attrdef-testelement-foo"><code>foo</code></dfn>
    <dd data-md>
     <p>the foo attribute</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="testelement" data-dfn-type="element-attr" data-export id="element-attrdef-testelement-bar"><code>bar</code></dfn>
    <dd data-md>
     <p>the bar attribute</p>
   </dl>
   <p>Here are the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="baz-attributes">baz attributes</dfn>:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="baz attributes" data-dfn-type="element-attr" data-export id="element-attrdef-baz-attributes-baz1"><code>baz1</code></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="baz attributes" data-dfn-type="element-attr" data-export id="element-attrdef-baz-attributes-baz2"><code>baz2</code></dfn></p>
   </ul>
   <p>Here are the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="quux-attributes">quux attributes</dfn>:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="quux attributes" data-dfn-type="element-attr" data-export id="element-attrdef-quux-attributes-quux1"><code>quux1</code></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="quux attributes" data-dfn-type="element-attr" data-export id="element-attrdef-quux-attributes-quux2"><code>quux2</code></dfn></p>
   </ul>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgtestelement"><code>SVGTestElement</code></dfn> interface is defined here.</p>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span></h3>
  <ul class="index">
   <li><a href="#element-attrdef-testelement-bar">bar</a><span>, in §Unnumbered section</span>
   <li>
    baz1
    <ul>
     <li><a href="#element-attrdef-testelement-baz1">(element-attr)</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-baz-attributes-baz1">element-attr for baz attributes</a><span>, in §Unnumbered section</span>
    </ul>
   <li>
    baz2
    <ul>
     <li><a href="#element-attrdef-testelement-baz2">(element-attr)</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-baz-attributes-baz2">element-attr for baz attributes</a><span>, in §Unnumbered section</span>
    </ul>
   <li><a href="#baz-attributes">baz attributes</a><span>, in §Unnumbered section</span>
   <li><a href="#element-attrdef-testelement-foo">foo</a><span>, in §Unnumbered section</span>
   <li>
    quux1
    <ul>
     <li><a href="#element-attrdef-testelement-quux1">(element-attr)</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-quux-attributes-quux1">element-attr for quux attributes</a><span>, in §Unnumbered section</span>
    </ul>
   <li>
    quux2
    <ul>
     <li><a href="#element-attrdef-testelement-quux2">(element-attr)</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-quux-attributes-quux2">element-attr for quux attributes</a><span>, in §Unnumbered section</span>
    </ul>
   <li><a href="#quux-attributes">quux attributes</a><span>, in §Unnumbered section</span>
   <li><a href="#svgtestelement">SVGTestElement</a><span>, in §Unnumbered section</span>
   <li><a href="#elementdef-testelement">testelement</a><span>, in §Unnumbered section</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-flow-content-2">
   <a href="https://html.spec.whatwg.org/multipage/dom.html#flow-content-2">https://html.spec.whatwg.org/multipage/dom.html#flow-content-2</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-content-2">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-graphics-element">
   <a href="https://svgwg.org/svg2-draft/struct.html#graphics-element">https://svgwg.org/svg2-draft/struct.html#graphics-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-graphics-element">Unnamed section</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flow-content-2" style="color:initial">flow content</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-graphics-element" style="color:initial">graphics element</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span></h3>
  <dl>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <aside class="dfn-panel" data-for="element-attrdef-testelement-foo">
   <b><a href="#element-attrdef-testelement-foo">#element-attrdef-testelement-foo</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-testelement-foo">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-testelement-bar">
   <b><a href="#element-attrdef-testelement-bar">#element-attrdef-testelement-bar</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-testelement-bar">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baz-attributes">
   <b><a href="#baz-attributes">#baz-attributes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baz-attributes">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-baz-attributes-baz1">
   <b><a href="#element-attrdef-baz-attributes-baz1">#element-attrdef-baz-attributes-baz1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-baz-attributes-baz1">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-baz-attributes-baz2">
   <b><a href="#element-attrdef-baz-attributes-baz2">#element-attrdef-baz-attributes-baz2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-baz-attributes-baz2">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quux-attributes">
   <b><a href="#quux-attributes">#quux-attributes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quux-attributes">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-quux-attributes-quux1">
   <b><a href="#element-attrdef-quux-attributes-quux1">#element-attrdef-quux-attributes-quux1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-quux-attributes-quux1">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-quux-attributes-quux2">
   <b><a href="#element-attrdef-quux-attributes-quux2">#element-attrdef-quux-attributes-quux2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-quux-attributes-quux2">Unnamed section</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgtestelement">
   <b><a href="#svgtestelement">#svgtestelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgtestelement">Unnamed section</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>